<!-- 入驻审核界面 -->
<template>
  <!-- <up-subsection :list="list" mode="subsection" :current="0" @change="sectionChange"></up-subsection> -->
  <view class="content">
    <!-- 审核列表 -->
    <view class="aduit_list" v-if="!isSeeDetail">
      <view class="audit_item" v-for="item in selfAudits" :key="item._id">
        <view class="a_top">
          <view class="a_t_left">店名: {{ item.storeName }}</view>
          <view class="a_t_right">商家名称: {{ item.sellerName }}</view>
        </view>
        <view class="a_center">
          <view class="c_top">店铺位置: {{ `${item.canteenName}` + `-窗口${item.window}` }}</view>
          <view class="c_bottom">联系电话: {{ item.phonenumber }}</view>
        </view>
        <view class="a_bottom">
          <view class="b_left">申请时间: {{ formatterTime(item.startTime) || '' }}</view>
          <view :class="{ b_right: true, wait: item.isPass == '1', fail: item.isPass == '-1', }">{{
            getAduitStatus(item.isPass) }}</view>
        </view>
        <view class="noPass" v-if="item.isPass == '-1' && item.failReason">未通过原因: {{ item.failReason }}</view>
        <view class="seeDetail" @click="detail(item)">查看详情 <up-icon name="arrow-right-double" color="#1890ff"
            size="20"></up-icon></view>
      </view>
    </view>
    <!-- 查看详情 -->
    <view class="main" v-if="isSeeDetail">
      <uni-forms ref="formRef" labelWidth="80px">
        <uni-forms-item label="店铺头像" name="avatar">
          <view class="avatar">
            <img :src="audit.storeIcon" alt="">
          </view>
        </uni-forms-item>
        <uni-forms-item label="店铺名称" name="storeName" required>
          <uni-easyinput v-model="audit.storeName" disabled />
        </uni-forms-item>
        <uni-forms-item label="联系电话" name="phonenumber" required>
          <uni-easyinput v-model="audit.phonenumber" disabled />
        </uni-forms-item>
        <uni-forms-item label="店铺类型" name="kinds" required>
          <uni-data-checkbox v-model="audit.kinds" :localdata="kinds" disabled />
        </uni-forms-item>
        <uni-forms-item label="店铺位置" name="address" required>
          <view class="address">{{ `${audit.canteenName}` + `-窗口${audit.window}` }}</view>
        </uni-forms-item>
      </uni-forms>
      <view class="materials">
        <view class="m_top">上传相关材料</view>
        <view class="m_main">
          <view class="m_item" v-for="(item, index) in 3" :key="item">
            <view class="avatar">
              <img :src="[audit.businessLicense, audit.identityFront, audit.identityReverse][index]" alt="">
            </view>
            <view class="m_text">{{ ['营业执照', "法人身份证(正面)", "法人身份证(反面)"][index] }}</view>
          </view>
        </view>
      </view>
      <!-- <button type="primary" @click="submit">提交</button> -->
      <view class="auditResult">
        <view class="a_left">审核结果</view>
        <view class="a_right">
          <select v-model="select" @change="handleChange">
            <option v-for="option in options" :key="option.value" :value="option.value">
              {{ option.label }}
            </option>
          </select>
        </view>
      </view>
      <up-textarea style="margin-bottom: 60rpx;" v-if="select == -1" v-model="failReason" placeholder="请输入审核失败的原因"
        count></up-textarea>
      <button type="primary" @click="submit">确定</button>
      <button style="margin-top: 20rpx;" type="default" @click="back">返回</button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { getUserProfile } from "@/api/system/user";
import useUserStore from '@/store/modules/user'
import { getUserInfo } from "@/api/user/index";
import { addAudit, getAllAudit, auditResult } from "@/api/audit/index";
import config from '@/config'
const userStore = new useUserStore()

/**
 * 获取当前用户的审核记录
 */
let selfAudits = ref([])
getAllAudit({ userId: userStore.userId }).then(res => {
  if (res.code == 200) {
    selfAudits.value = res.data
    console.log('selfAudits.value: ', selfAudits.value);
  }
})

// 时间格式化
function formatterTime(time) {
  if (!time) {
    return ''
  }

  const date = new Date(Number(time));

  // 获取年、月、日、时、分、秒
  const year = date.getFullYear(); // 年份
  const month = date.getMonth() + 1; // 月份（0-11，需要加1）
  const day = date.getDate(); // 日期
  const hours = date.getHours(); // 小时
  const minutes = date.getMinutes(); // 分钟
  const seconds = date.getSeconds(); // 秒

  // 返回格式化后的字符串
  return `${year}年/${month}月/${day}日/${hours}时/${minutes}分/${seconds}秒`;
}

/**
 * 查看详情
 */
let audit = ref({})
let isSeeDetail = ref(false)
function detail(item) {
  console.log(item);
  audit.value = item
  isSeeDetail.value = true
}

const kinds = [
  {
    text: '面食',
    value: "0"
  },
  {
    text: '套餐饭',
    value: "1"
  },
  {
    text: '小吃',
    value: "2"
  },
  {
    text: '饮品',
    value: "3"
  },
  {
    text: '水果',
    value: "4"
  },
  {
    text: '其他',
    value: "-1"
  }
];

/**
 * 获取审核状态
 */
function getAduitStatus(status) {
  if (status == '0') {
    return '待审核'
  } else if (status == '1') {
    return '审核成功'
  } else if (status == '-1') {
    return '审核失败'
  }
}

/**
 * 审核结果
 */
const select = ref('');
const failReason = ref('')
const options = [
  { value: '', label: '请选择' },
  { value: '1', label: '审核通过' },
  { value: '-1', label: '审核未通过' }
];
const handleChange = () => {
  console.log('选中的值为:', select.value);
};

/**
 * 提交审核结果
 */
function submit() {
  if (select.value == '') {
    uni.showToast({ title: "请选择审核结果", icon: "error" })
    return
  }

  let params = {}
  if (select.value == 1) {
    params = { _id: audit.value._id, isPass: 1 }
  } else if (select.value == -1) {
    if (failReason.value == '') {
      uni.showToast({ title: "请输入审核失败原因", icon: "error" })
      return
    }
    params = { _id: audit.value._id, isPass: -1, failReason: failReason.value }
  }

  console.log(params);

  auditResult(params).then(async res => {
    if (res.code == 200) {
      await getAllAudit()
      uni.showToast({ title: "审核状态已修改", icon: "success" })
      setTimeout(() => {
        isSeeDetail.value = false
      }, 1000);
    } else {
      uni.showToast({ title: "网络开了点小差~", icon: "error" })
    }
  }).catch(err => {
    uni.showToast({ title: "网络开了点小差~", icon: "error" })
  })

}
/**
 * 返回审核列表
 */
function back() {
  isSeeDetail.value = false
}
</script>

<style lang="scss">
.content {
  height: calc(100vh - var(--window-top));
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: $uni-bg-color-grey;
  overflow: auto;
  background-color: #ffffff;

  .main,
  .aduit_list {
    overflow: auto;
    padding: 30rpx;
  }
}

page {
  background-color: #ffffff;
}

.example {
  padding: 30rpx;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 30rpx;
}

.button-group {
  margin-top: 40rpx;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
  flex: 1;
}

.uni-forms-item {
  margin-bottom: 30rpx;
}

.button {
  display: flex;
  align-items: center;
  height: 70rpx;
  line-height: 70rpx;
  margin-left: 20rpx;
}

.avatar {
  width: 160rpx;
  height: 160rpx;
  border: 2rpx solid #edf2fa;
  border-radius: 50%;

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}

.address {
  height: 100%;
  display: flex;
  align-items: center;
  color: $uni-text-color-grey
}

.materials {
  display: flex;
  width: 100%;
  flex-direction: column;
  border: 1rpx solid $uni-border-color;
  margin-bottom: 20rpx;

  .m_top {
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
  }

  .m_main {
    width: 100%;
    display: flex;
    padding: 20rpx;
    background-color: #fafafa;
    justify-content: space-between;

    .m_item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .avatar {
        width: 200rpx;
        height: 200rpx;
        border: 1rpx solid $uni-border-color;
        border-radius: 0;
        background-image: url("@/assets/mine/addStore/add.svg");
        background-size: 30%;
        background-repeat: no-repeat;
        background-position: center;

        img {
          width: 100%;
          height: 100%;
          border-radius: 0;
        }
      }

      .m_text {
        margin-top: 20rpx;
        color: $uni-text-color;
        font-size: 24rpx;
      }
    }
  }
}

.aduit_list {
  padding: 30rpx;
  display: flex;
  flex-direction: column;

  .audit_item {
    width: 100%;
    border: 1rpx solid $uni-border-color;
    padding: 20rpx;
    margin-bottom: 20rpx;

    .a_top {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      color: $uni-text-color;
      font-size: 28rpx;

      .a_t_right {
        font-size: 24rpx;
        padding: 8rpx 24rpx;
        border: 1rpx solid $uni-border-color;
      }
    }

    .a_center {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin: 20rpx 0;
      font-size: 28rpx;
      color: $uni-text-color ;

      .c_bottom {
        margin-top: 16rpx;
      }
    }

    .a_bottom {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .b_left {
        color: $uni-text-color-grey;
        font-size: 24rpx;
      }

      .b_right {
        color: $uni-color-warning;
        font-size: 28rpx;
      }

      .wait {
        color: $uni-color-success ;
      }

      .fail {
        color: $uni-text-color-red;
      }

    }

  }

  .noPass {
    color: $uni-color-error;
    font-size: 20rpx;
    margin-top: 10rpx;
  }
}

.seeDetail {
  width: 100%;
  color: $uni-text-color-blue;
  display: flex;
  justify-content: end;
  gap: 10rpx;
  margin-top: 10rpx;
}

.auditResult {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 100rpx;
  font-size: 32rpx;
  gap: 30rpx;
  margin-bottom: 20rpx;
}
</style>